<template>
	<view class="top-content">
		<view class="content-headImage">
			<view>
				<view>高富帅</view>
				<view>世界上有钱人这么多，多我一个这怎么了?</view>
			</view>
			<view class="content-button" @click="handleFollowClick">
				删除
			</view>
		</view>
		<view class="content-Image-item-icon">
			<view>
				<image src="/static/images/banner/share.png"></image>
				<view>分享</view>
			</view>
			<view>
				<image src="/static/images/banner/comment.png"></image>
				<view>评论</view>
			</view>
			<view>
				<image src="/static/images/banner/collect.png"></image>
			</view>
			<view>
				<image src="/static/images/banner/ok.png"></image>
			</view>
		</view>

		<!-- 点击帖子右上角三个点 -->
		<view>
			<u-modal :show="show" :title="title" :showConfirmButton="true" :showCancelButton="true" @cancel="cancel"
				@confirm="confirm">
				<view>删除此帖后，其中的回复都将会被删除</view>
			</u-modal>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const show = ref(false)
	const value = ref('')
	const title = ref('删除')
	const handleFollowClick = (() => {
		show.value = true
	})
	const cancel = (() => {
		show.value = false
	})
	const confirm = (() => {
		show.value = false
	})
	//多选，选框
	const range = ref([{
			text: '涉嫌欺诈',
			value: 0
		}, {
			text: '色情低俗',
			value: 1
		}, {
			text: '政治敏感',
			value: 2
		}, {
			text: '虚假不实',
			value: 3
		},
		{
			text: '违反公德秩序',
			value: 4
		},
		{
			text: '搬运抄袭',
			value: 5
		}
	])
</script>

<style lang="scss" scoped>
	page {}

	.top-content {
		margin: 15rpx;
		border-radius: 15rpx;
		background-color: #fff;

		.content-headImage {
			display: flex;
			// align-items: center;
			padding: 20rpx;
			border-radius: 15rpx;
			position: relative;

			view {
				margin: 15rpx;
			}
			.content-button {
				top: 0rpx;
				right: 0rpx;
				color:#A9A9A9;
			}

		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			text-align: center;

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}

		.content-Image-item-icon view:nth-child(1) {
			display: flex;
			margin-left: 80rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(2) {
			display: flex;
			margin-left: 100rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(3) {
			// flex: 1;
			margin-left: 100rpx;
		}

		.content-Image-item-icon view:nth-child(4) {
			// flex: 1;
			margin-left: 100rpx;
		}
	}
</style>